<template>
	<view>
		<!-- 内容开始 -->
		<view class="contentBox ">
			<view class="content">
				<image :src="info.img" alt="">
					<view class="">
						<text class="price"><text class="money">￥</text>{{info.price}}</text><text
							class="marketPrice">￥{{info.market_price}}</text>
						<text class="collect">
							收藏
							<u-icon class="icon" name="star"></u-icon>
							<!-- <u-icon name="star-fill"></u-icon> -->
						</text>
						<view class="title">{{info.goodsname}}</view>
						<!-- <view class="msg">敏感肌可用，控油祛痘、男女可用、泡沫绵密、净透毛孔</view> -->

						<text class="limit">11.11限时299元起</text>


						<view class="end">
							次商品于2020-11-11结束闪购特卖，品牌美妆闪购专场<text>查看 > </text>
						</view>

						<!-- 内容结束 -->
						<!-- 商品属性开始 -->
						<view class="property">
							<view>
								<text class="title">领<br> 劵</text>
								<view class="Securities">
									<text>100</text>
									<text>50</text>
									<text>20</text>
								</view>
							</view>
							<view class="title">商品属性</view>
							<view class='colorBox'>
								<text class="colors">{{info.specsname}}</text>
								<block class="" v-for="(item,index) in info.specsattr" :key="index">
									<text class="color">{{item}}</text>
								</block>

							</view>
							<!-- 商品属性结束 -->

						</view>
						<!-- 详情内容 -->
						<view v-html='info.description'></view>
					</view>
			</view>
		</view>
		<!-- 底部按钮 -->
		<view class="navigation">
			<view class="left">
				<view class="item">
					<u-icon name="server-fill" :size="25" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">客服</view>
				</view>
				<view class="item">
					<u-icon name="home" :size="25" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1">店铺</view>
				</view>
				<view class="item car" @click="goCart">
					<u-badge class="car-num" :count="cartCount" type="error" :offset="[-3, -6]"></u-badge>
					<u-icon name="shopping-cart" :size="25" :color="$u.color['contentColor']"></u-icon>
					<view class="text u-line-1" @click="goCart">购物车</view>
				</view>
			</view>
			<view class="right">
				<view class="cart btn u-line-1" @click="addCart(info.id)">加入购物车</view>
				<view class="buy btn u-line-1">立即购买</view>
			</view>
		</view>

		<!-- 分享给朋友 微信端 -->
		<!-- #ifdef MP-WEIXIN -->
		<view class="shareFriend">
			<button type="default" open-type="share">
				<image src="../../static/images/wxshare.png" mode=""></image>
			</button>
		</view>
		<!-- #endif -->

		<!-- 客服 -->
		<view class="kefu">
			<image src="../../static/images/客服.png" @click="goKefu"></image>
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				info: '', // 商品详情
				cartCount: 1, //徽标初始值
			}
		},
		onLoad(params) {
			console.log(params);
			this.getgoodsinfo(params);
		},
		methods: {
			// 获取商品详情
			getgoodsinfo(params) {
				let {
					id
				} = params;
				// 商品详情
				this.$http({
					url: '/getgoodsinfo',
					data: {
						id
					}
				}).then(res => {
					this.info = res.data.list[0]
					this.info.specsattr = JSON.parse(this.info.specsattr);
					this.info.img = this.$baseUrl + this.info.img
					this.info.description = this.info.description.replace(/\<img/gi,
						'<img style="width:100% !important"')
				})
			},
			// 加入购物车
			async addCart(goodsid) {
				// 判断是否登录  
				// console.log(this.$store.state.userInfo);
				if (this.$store.state.userInfo) {
					// 如果登录  点击添加购物车
					let {
						uid,
						token
					} = this.$store.state.userInfo;
					let res = await this.$http({
						url: '/cartadd',
						method: 'post',
						data: {
							uid,
							goodsid,
							num: 1,
						},
						header: {
							authorization: token
						}
					})
					console.log(res);
					// 添加成功
					if (res.data.code == 200) {
						uni.showToast({
							title: '添加成功',
							icon: 'success'
						})
					} else {
						uni.showToast({
							title: '添加失败',
							icon: 'error'
						})
					}

				} else {
					// 没有登录  提示未登录
					uni.showToast({
						title: '请先登录',
						icon: 'error'
					})
					return;
				}
			},

			// 跳转购物车
			goCart() {
				uni.switchTab({
					url: '/pages/cart/cart'
				})
			}
		}
	}
</script>

<style lang="scss">
	/* 内容开始 */
	.content image {
		width: 100%;
		height: 700rpx;
		margin: 5rpx 0 30rpx;
	}

	.content {
		padding-bottom: 8rpx;
		margin-bottom: 20rpx;
		background-color: #ffffff;

	}

	.content>view {
		padding: 20rpx;
		box-sizing: border-box;
	}


	.content .price {
		font-size: 48rpx;
		color: #ff6040;
	}

	.content .money {
		font-size: 20rpx;
		color: #ff563d;
		margin-left: 10rpx;
	}

	.content .marketPrice {
		font-size: 24rpx;
		color: #a5a6a8;
	}

	.content .collect {
		font-size: 23rpx;
		color: #ff7371;
		position: relative;
		float: right;
		/* text-align: center; */
	}

	.collect .icon {
		position: absolute;
		right: 5rpx;
		bottom: 30rpx;
	}

	.content b {
		font-size: 22rpx;
		color: #f37962;
		position: absolute;
		left: 14rpx;
		top: -20rpx;
	}


	.content .title {
		font-size: 32rpx;
		color: #30384b;
		font-weight: normal;
		margin: 28rpx 0 12rpx;
	}

	.content .msg {
		font-size: 26rpx;
		color: #9e9fa1;
		margin: 20rpx 0;
	}

	.content .limit {
		/* width: 90%; */
		padding: 9rpx 9rpx 6rpx 7rpx;
		background-color: #ff8066;
		font-size: 18rpx;
		color: #ffffff;
		box-sizing: border-box;
		/* margin: 24rpx 0 22rpx; */
		/* margin-bottom: 20rpx; */
		border-radius: 3rpx;
	}

	.content .end {
		font-size: 24rpx;
		color: #9094a0;
		background-color: #f1f1f1;
		/* background-color: red; */
		margin: 20rpx 4rpx 16rpx;
		padding: 6rpx 0 4rpx;

	}

	.content .end text {
		font-size: 24rpx;
		color: #ff6042;
		background-color: #f1f1f1;
		/* margin: 0rpx 2rpx 0 2rpx;float */
		float: right;
		/* padding-right: 40rpx; */
	}

	/* 内容结束 */
	/* 商品属性开始 */
	.property .title {
		font-size: 24rpx;
		line-height: 32rpx;
		color: #343a46;
	}

	.property .Securities text {
		display: inline-block;
		width: 80rpx;
		height: 34rpx;
		background: url(../../static/images/奖券.png);
		font-size: 20rpx;
		color: #6a3e01;
		line-height: 32rpx;
		text-align: center;
		margin-top: 12rpx;
	}

	.property>view {
		display: flex;
		padding: 0 20rpx 0 16rpx;
		margin-bottom: 37rpx;
		/* background-color: red; */
	}

	.property>view view {
		/* width: 6.27rem; */
		width: 100%;
		/* background-color: pink; */
		margin-left: 60rpx;
		border-bottom: 3rpx solid #d2d2d2;
		padding-left: 20rpx;
		/* margin-bottom: .11rem; */

	}

	.property .installment {
		font-size: 25rpx;
		color: #7b767a;
		margin-top: 12rpx;
		padding: 0;

	}

	.property .installment view {
		display: inline-block;
		margin-right: 440rpx;
	}

	/* .property>div:nth-child(2) {
		margin-bottom: 50rpx;
	}
 */
	.property>.title {
		font-size: 26rpx;
		color: #311f2b;
		margin-bottom: 20rpx;
		/* margin-left: rpx; */
	}

	.property>.colorBox>.colors {
		font-size: 26rpx;
		/* color: #f1f0de; */
		display: inline-block;
		width: 118rpx;
		height: 80rpx;
		/* background-color: #ccc; */
		text-align: center;
		line-height: 80rpx;
		margin-right: 20rpx;
		text-align: left;
		color: #000;
		background-color: #ffffff;
	}

	.property>.colorBox>text {
		font-size: 26rpx;
		// color: #f1f0de;
		display: inline-block;
		width: 118rpx;
		height: 80rpx;
		text-align: center;
		line-height: 80rpx;
		margin-right: 20rpx;
	}

	.property>.colorBox>.active {
		background-color: #fe0000;
	}


	.property .black {
		background-color: #e1e1e1;
		color: #f1f0de;
	}

	.property>.colorBox {
		height: 80rpx;
		padding-bottom: 40rpx;
	}

	.property view .colorBox .active {
		color: #f1f0de;
		background-color: #fe0000;

	}

	.property {
		padding-top: 40rpx;
		background: #ffffff;
	}

	/* 商品属性结束 */
	// 底部操作样式
	.navigation {
		width: 100%;
		position: fixed;
		bottom: var(--window-bottom);
		background-color: #FFFFFF;
		display: flex;
		border: solid 2rpx #f2f2f2;
		background-color: #ffffff;
		padding: 16rpx 0;

		.left {
			display: flex;
			font-size: 20rpx;

			.item {
				margin: 0 26rpx;

				&.car {
					text-align: center;
					position: relative;

					.car-num {
						position: absolute;
						top: -10rpx;
						right: -10rpx;
					}
				}
			}
		}

		.right {
			display: flex;
			font-size: 28rpx;
			align-items: center;

			.btn {
				line-height: 66rpx;
				padding: 0 30rpx;
				border-radius: 36rpx;
				color: #ffffff;
			}

			.cart {
				background-color: #ed3f14;
				margin-right: 30rpx;
			}

			.buy {
				background-color: #ff7900;
			}
		}
	}

	// 分享给朋友
	.shareFriend {
		position: fixed;
		top: 400rpx;
		right: 20rpx;
		border-radius: 100%;

	}

	.shareFriend button {
		width: 90rpx;
		height: 90rpx;
		margin: 0;
		padding: 0;
		border-radius: 150%;
		background-color: rgba(0, 0, 0, 0);
	}

	button::after {
		border: none;
	}

	.shareFriend image {
		width: 90rpx;
		height: 90rpx;
	}

	// 客服
	.kefu {
		position: fixed;
		bottom: 150rpx;
		right: 20rpx;
		height: 90rpx;
		width: 90rpx;
		background-color: rgba(0, 0, 0, 0.2);
		border-radius: 100%;
		text-align: center;
	}

	.kefu image {
		margin: 17rpx auto;
		width: 55rpx;
		height: 55rpx;
	}
</style>